Reader: Improve user hovercard performance by using custom implementation by mehmoodak · Pull Request #109865 · Automattic/wp-calypso

mehmoodak · 2026-04-07T15:23:44Z

Closes: READ-460
Before reviewing this review: #109718, #109846, #109854 (and then a rebase with trunk will be needed)

Proposed Changes

Added custom implementation of user hovercards and removed gravatar hovercards.
Migrated all related files to TypeScript.
Prefetch WPCOM users for instant display while for non-WPCOM trigger fetch on hover.
Avoid layout shifts and show better user info than before.
Matches the layout with Figma designs.

Before	After



	Simple Loader...

Here is the comparison video that shows improvements in WPCOM user hovercards (notice speed, better data and less layout shifts)

Screen.Recording.2026-04-08.at.6.32.57.AM.mov

Why are these changes being made?

On user avatars we were displaying Gravatar Hovercards. It does work but offers no control, makes extra API calls, had layout shifts and often times show incomplete data. Sometimes displaying hovercard takes 3s-7s which affects UX.

To avoid all of above we have move towards a custom implementation which offers:

More control. All components exists in our own codebase which offers more control like prefetching WPCOM users.
Less API calls. We have updated v1.1/users1 endpoint to send most of the data in 1 API call.
No layout shifts. Due to more control we now can decide early what to display which avoids layout shifts.
Better Data. Instead of just showing Gravatar hovercard we also fetch data against user login to get more info from WPCOM.

After all of above changes WPCOM user hovercards will display instantly (<0.1s) while non-WPCOM user hovercard will appear slightly fast (~2s - 3s).

Testing Instructions

We are using UserAvatar in following places. Test that each avatar is working as expected.

Comments Form in streams where we show logged in user avatar (no hovercard in this case).
Comments in streams where we show post comments (test hovercard as well). Try to test all streams.
Header of full post view.
In x-posts reader items (use any P2 that have cross posts)
Header in User Profile page (no hovercard in this case)

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you tested accessibility for your changes? Ensure the feature remains usable with various user agents (e.g., browsers), interfaces (e.g., keyboard navigation), and assistive technologies (e.g., screen readers) (PCYsg-S3g-p2).
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

…EAD-460/improve-performance-of-gravatar-hovercard

github-actions · 2026-04-07T15:24:01Z

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-175154

Jetpack Cloud Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-175154&env=jetpack

Automattic for Agencies Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-175154&env=a8c-for-agencies

Dashboard Live (dotcom) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-175154&env=dashboard

Dashboard Live (CIAB) (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-175154&env=dashboard-ciab

…EAD-460/improve-performance-of-gravatar-hovercard

matticbot · 2026-04-07T23:06:05Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

help-center
notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug READ-460/improve-performance-of-gravatar-hovercard on your sandbox.

mehmoodak

Added comments for easier review.

mehmoodak · 2026-04-07T22:02:47Z

client/reader/user-profile/components/user-profile-header/index.tsx

 			<header className="user-profile-header">
 				<div className="user-profile-header__user-info">
-					<UserAvatar user={ user } iconSize={ 56 } />
+					<UserAvatar user={ user } size={ 56 } hideHovercard />


Do not display hovercard on header of user profile page.

mehmoodak · 2026-04-07T22:05:16Z

client/reader/components/icons/user-avatar-default-icon.tsx

Keeping default Gravatar icon locally so that we can prevent HTTP calls.

mehmoodak · 2026-04-07T22:08:22Z

client/components/preloaded-image/index.tsx

PreloadedImage is a wrapper around the HTML img element which only displays the image once it has been fully loaded. This is useful to prevent layout shifts and display a placeholder while the image is loading.

Currently only using it on the avatar of hovercard but have plan to use it more in Reader codebase.

mehmoodak · 2026-04-07T22:17:55Z

client/blocks/user-avatar/user-hovercard/primary-blog-card/index.tsx

Have made following changes in file. The functionality of the file is mostly same as before.

Converted the file to TypeScript.

Updated the code to use the data coming from parent instead of request our own. (this comes from v1.1/users endpoint)

mehmoodak · 2026-04-07T22:21:58Z

client/blocks/user-avatar/user-hovercard/primary-blog-card/styles.scss

Styles are moved from a single file to their dedicated component files. Most of the styles are same as before.

mehmoodak · 2026-04-07T22:22:17Z

client/blocks/user-avatar/user-hovercard/recommended-blogs/styles.scss

Styles are moved from a single file to their dedicated component files. Most of the styles are same as before.

mehmoodak · 2026-04-07T22:22:28Z

client/blocks/user-avatar/user-hovercard/user-hovercard-header/styles.scss

Styles are moved from a single file to their dedicated component files. Most of the styles are same as before.

mehmoodak · 2026-04-07T22:39:08Z

client/blocks/user-avatar/user-hovercard/queries/use-gravatar-profile-v3-query.ts

TanStack query to fetch info from Gravatar API. We'll only use this if we don't have a WPCOM user ID or login.

mehmoodak · 2026-04-07T22:39:59Z

client/blocks/user-avatar/user-hovercard/recommended-blogs/index.tsx

Have made following changes in file. The functionality of the file is mostly same as before.

Converted the file to TypeScript.

Updated the code to use the data coming from parent instead of request our own. (this comes from v1.1/users endpoint)

mehmoodak added 30 commits April 7, 2026 05:11

💫 UPDATE: Use updated fields from users endpoint and updated tests

3251dfb

💫 UPDATE: types

e26cc0e

UPDATE: Makes site icons square and avoid mixing it with user avatars

34ec99c

👌 IMPROVE: add personal feedback

1fa66d6

🐛 FIX: classname

9269280

UPDATE: Makes site icons square and avoid mixing it with user avatars

597aacf

👌 IMPROVE: user avatar navigations

21c6255

💫 UPDATE: renmae UserAvatar iconSize prop to size

4daea00

👌 IMPROVE: personal feedback

aacb92f

🐛 FIX: Use wpcom_login for user profile navigation

5423007

🐛 FIX: Use wpcom_id field to get user info and not ID field

2d53769

Refactor: PrimaryBlogCard to TypeScript

2be7b34

Refactor: GravatarHeader to TypeScript

c12729c

Refactor: Gravatar RecommendedBlogs to TypeScript

324a4bf

Refactor: Gravatar HovercardContent to TypeScript

bdb8bf6

Refactor: GravatarWithHovercards to TypeScript

1f2a0b5

Implement custom UserHovercard

07009a4

🐛 FIX: user avatar fixes

2d68279

🐛 FIX: gravatar fixes

32e4e65

Add PreloadedImage component

2051091

Add useUserHovercardQuery

739b5de

💫 UPDATE: Use user hovercard query for the component

14b9855

🐛 FIX: minor UI tweaks

55c4a53

➕ ADDS: search users via gravatar email hash as well

cfa1d0f

➕ ADDS: gravatar fallback

36fe7ef

💫 UPDATE: Use updated fields from users endpoint and updated tests

9a4f97f

💫 UPDATE: types

ee14a23

Add and use useReaderUserQuery in User Profile page

672bcb9

🐛 FIX: useGetReaderUserQuery returning empty string

9609a14

👌 IMPROVE: loader

9f34e52

mehmoodak added 4 commits April 7, 2026 15:52

Merge branch 'READ-468/use-tanstack-query-on-user-profile-page' into R…

58e7a0a

…EAD-460/improve-performance-of-gravatar-hovercard

💫 UPDATE: use useGetReaderUserQuery for user hovercard

dadd50c

🐛 FIX: overflows

c102ba2

🐛 FIX: styling and navigations

803f3c5

mehmoodak self-assigned this Apr 7, 2026

🐛 FIX: stale state of subscribe button

9d5041a

mehmoodak force-pushed the READ-468/use-tanstack-query-on-user-profile-page branch from 9f34e52 to 0ea831b Compare April 7, 2026 21:03

Merge branch 'READ-468/use-tanstack-query-on-user-profile-page' into R…

79b476e

…EAD-460/improve-performance-of-gravatar-hovercard

mehmoodak changed the title ~~Reader: Improve performance of gravatar hovercards~~ Reader: Migrate away from Gravatar Hovercards for more control and improved performance Apr 7, 2026

🐛 FIX: personal feedback

b1924c3

mehmoodak force-pushed the READ-460/improve-performance-of-gravatar-hovercard branch from be09f85 to b1924c3 Compare April 7, 2026 23:04

mehmoodak added 2 commits April 8, 2026 04:19

🐛 FIX: styles

d59674d

🐛 FIX: use PreloadedImage in UserAvatar

3674dd2

mehmoodak commented Apr 7, 2026

View reviewed changes

➕ ADDS: tests for all new components

71f5ab8

mehmoodak changed the title ~~Reader: Migrate away from Gravatar Hovercards for more control and improved performance~~ Reader: Use custom implementation of user hovercard Apr 8, 2026

mehmoodak added 3 commits April 8, 2026 05:59

🐛 FIX: tests

627ff40

👌 IMPROVE: translations

94020d5

🐛 FIX: popover click propagation

001268d

mehmoodak changed the title ~~Reader: Use custom implementation of user hovercard~~ Reader: Improve user hovercard performance by using custom implementation Apr 8, 2026

🐛 FIX: tests

a91b5b6

mehmoodak marked this pull request as ready for review April 8, 2026 13:05

mehmoodak requested a review from a team as a code owner April 8, 2026 13:05

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Apr 8, 2026

mehmoodak mentioned this pull request Apr 8, 2026

Reader: Remove @gravatar-com/hovercards package #109898

Open

9 tasks

🐛 FIX: tests

71fb852

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reader: Improve user hovercard performance by using custom implementation#109865

Reader: Improve user hovercard performance by using custom implementation#109865
mehmoodak wants to merge 45 commits intoREAD-468/use-tanstack-query-on-user-profile-pagefrom
READ-460/improve-performance-of-gravatar-hovercard

mehmoodak commented Apr 7, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 7, 2026 •

edited by matticbot

Loading

Uh oh!

matticbot commented Apr 7, 2026 •

edited

Loading

Uh oh!

mehmoodak left a comment

Uh oh!

mehmoodak Apr 7, 2026

Uh oh!

mehmoodak Apr 7, 2026

Uh oh!

mehmoodak Apr 7, 2026

Uh oh!

mehmoodak Apr 7, 2026

Uh oh!

mehmoodak Apr 7, 2026

Uh oh!

mehmoodak Apr 7, 2026

Uh oh!

mehmoodak Apr 7, 2026

Uh oh!

mehmoodak Apr 7, 2026

Uh oh!

mehmoodak Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

mehmoodak commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Apr 7, 2026 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Apr 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mehmoodak left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mehmoodak commented Apr 7, 2026 •

edited

Loading

github-actions bot commented Apr 7, 2026 •

edited by matticbot

Loading

matticbot commented Apr 7, 2026 •

edited

Loading